import React, { useRef, useState } from "react"
import Page from "@/components/page"
import { View, Text, Swiper, SwiperItem } from "@tarojs/components"
import PageNav from "@/components/pageNav"
import MoveArea from "@/components/moveArea"
import TypeSwitch from "@/components/typeSwitch"
import { ToPage } from "@/utils"
import Taro, { getStorageSync, setStorageSync } from "@tarojs/taro"
import { eventBus } from '@/event-bus';
import ArticleList from "./articleList"

import "./index.scss"
import user from "@/store/user"

const NotePage: React.FC = () => {
    const [type, setType] = useState('public')
    const [navHeight, setNavHeight] = useState(0)
    const [clickDown, setClickDown] = useState(false)
    const [currentIndex, setCurrentIndex] = useState<number>(0)

    const touchStart = () => {
        setClickDown(true)
    }
    const touchEnd = () => {
        setClickDown(false)
    }
    const toArticle = () => {
        if (user.info?.token) {
            ToPage('/pages/article/detail/index?mode=edit')
        } else {
            ToPage('/pages/login/index')
        }
    }
    const typeChange = (type) => {
        setType(type)
        setCurrentIndex(type === 'mine' ? 1 : 0)
        setStorageSync('articleType', type)
        if (type === 'mine') {
            mineListRef.current.pageInit()
        } else {
            publicListRef.current.pageInit()
        }
    }
    const swiperChange = (index) => {
        setCurrentIndex(index)
        setType(['public', 'mine'][index])
    }

    Taro.useDidShow(async () => {
        const needRefresh = await getStorageSync('article-list-refresh')
        if (needRefresh) {
            [publicListRef, mineListRef][currentIndex].current.pageInit()
            setStorageSync('article-list-refresh', '')
        }
    })

    Taro.useLoad(() => {
        setStorageSync('articleType', 'public')
        eventBus.on('refreshArticleList', () => {
            setStorageSync('article-list-refresh', 'true')
        });
    })


    const publicListRef = useRef<{
        pageInit: () => void
    }>({
        pageInit: () => { }
    })

    const mineListRef = useRef<{
        pageInit: () => void
    }>({
        pageInit: () => { }
    })

    return (
        <Page className="note-page page-background text-main-color">
            <MoveArea>
                <View className={"page-add-btn flex-column flex-center" + (clickDown ? ' click-down' : '')}
                    onClick={toArticle}
                    onTouchStart={touchStart}
                    onTouchEnd={touchEnd}
                >
                    <View id="guide-btn" className="add-btn-item type-item flex-column flex-center">
                        <Text className="iconfont hide-animate icon-bianji"></Text>
                        <View className="font-size24">记笔记</View>
                    </View>
                </View>
            </MoveArea>
            <PageNav className="note-page-header" getHeight={setNavHeight}>
                <TypeSwitch
                    onChange={(type) => typeChange(type)}
                    value={type}
                    list={[
                        { name: '公告', value: 'public' },
                        { name: '我的', value: 'mine' }
                    ]}>
                </TypeSwitch>
            </PageNav>
            <Swiper
                className='swiper-container'
                style={{ height: `calc(100vh - ${navHeight}px)` }}
                indicatorColor='#999'
                indicatorActiveColor='#333'
                indicatorDots={false}
                current={currentIndex}
                onChange={e => swiperChange(e.detail.current)}>
                <SwiperItem>
                    <ArticleList ref={publicListRef} type="public" height={navHeight}></ArticleList>
                </SwiperItem>
                <SwiperItem>
                    <ArticleList ref={mineListRef} type="mine" height={navHeight}></ArticleList>
                </SwiperItem>
            </Swiper>
        </Page>
    )
}

export default NotePage